<template>
  <el-card>
    <div slot="header">
        <slot name="card-header"></slot>
    </div>
  <template>
  </template>
    <el-table
      ref="mtable"
      v-loading="loading"
      v-bind="$attrs"
      :border="border"
      :header-row-style="defaultHeaderRowStyle"
      :header-cell-style="defaultHeaderCellStyle"
      :cell-style="defaultCellStyle"
      class="table-list__main"
      show-overflow-tooltip
    >
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <el-table-column
        v-for="filed in columns"
        :key="filed.prop"
        v-bind="filed"
      >
        <template v-if="filed.prop && $slots[filed.prop]" #default="scope">
          <slot :name="filed.prop" :row="scope.row" />
        </template>
      </el-table-column>
    </el-table>
    <div v-if="pagination" class="table-list__footer">
      <div>
      <el-pagination
        v-bind="paginationProps"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      </div>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { ref, toRefs } from "vue";
import useTable from "./uses/useTable";
import usePagination from "./uses/usePagination";
// defineComponent({
//     inheritAttrs: false
// });

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  // 表格列
  columns: {
    type: Array,
    default: () => []
  },
  border: {
    type: Boolean,
    default: true
  },
  pagination: {
    type: Object,
    default: () => null
  }
});
// 这里其实可以使用defineModel，我这样写只是为了让习惯vue2的稍微清晰一点
const emit = defineEmits(["update:pagination"]);
const mtable = ref(null);
const { pagination } = toRefs(props);

const { defaultHeaderRowStyle, defaultHeaderCellStyle, defaultCellStyle } =
  useTable();
const { paginationProps, handleSizeChange, handleCurrentChange } =
  usePagination(emit, pagination);
  defineExpose({
  mtable
});
</script>
<style scoped lang="scss">
  .table-list__footer{
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
</style>